<!DOCTYPE html>
<html lang="en" class="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="./static/common/css/tailwindcss.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        .mobile-menu .open {
            height: auto;
        }

        .menu-toggle {
            cursor: pointer;
        }
    </style>
</head>
<!-- 
Breakpoint prefix	Minimum width	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... } 
-->

<body>
    <header
        class="fixed w-full top-0 z-50 backdrop-blur-md shadow-md text-dark dark:text-white bg-white/95 dark:bg-neutral-800/95 transition-all duration-600 ease-in-out">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 md:h-20">
                <!-- Logo -->
                <div class="flex items-center">
                    <a href="#" class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                            <i class="fa-solid fa-feather-alt dark:text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">知识探索者</span>
                    </a>
                </div>

                <!-- 桌面导航菜单 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class=" font-medium">首页</a>
                    <a href="categories.html" class="  ">分类</a>
                    <a href="tags.html" class="  ">标签</a>
                    <a href="timeline.html" class="  ">时间线</a>
                    <a href="about.html" class="  ">关于我</a>
                </nav>

                <!-- 功能按钮 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索按钮 -->
                    <button id="search-toggle">
                        <i class="fa-solid fa-search text-xl w-10"></i>
                    </button>

                    <!-- 主题切换按钮 -->
                    <button id="theme-toggle">
                        <div class="dark:hidden">
                            <i class="fa-solid fa-moon text-xl w-10"></i>
                        </div>
                        <div class="hidden dark:inline-block">
                            <i class="fa-solid fa-sun text-xl w-10"></i>
                        </div>
                    </button>

                    <!-- 登录/注册按钮 -->
                    <div class="hidden md:block">
                        <a href="login.html">登录</a>
                        <a href="login.html">注册</a>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <div class="md:hidden flex items-center">
                        <button id="menu-toggle">
                            <i class="fa-solid fa-bars text-xl w-10"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="mobile-menu md:hidden h-0 overflow-hidden transition-all duration-600 ease-in-out">
            <div class="px-4 pt-2 pb-6 space-y-4">
                <a href="#" class="block py-2  font-medium border-l-4 border-primary dark:border-primary pl-3">首页</a>
                <a href="categories.html" class="block py-2 border-l-4 border-transparent pl-3">分类</a>
                <a href="tags.html" class="block py-2 border-l-4 border-transparent pl-3">标签</a>
                <a href="timeline.html" class="block py-2 border-l-4 border-transparent pl-3">时间线</a>
                <a href="about.html" class="block py-2 border-l-4 border-transparent pl-3">关于我</a>
                <div class="pt-4 flex flex-col space-y-3">
                    <a href="login.html" class="text-center py-2 border rounded-lg">登录</a>
                    <a href="register.html"
                        class="text-center bg-primary hover:bg-primary/90 text-white font-medium py-2 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl hover:shadow-primary/20">注册</a>
                </div>
            </div>
        </div>
        <!-- 搜索框 -->
        <div id="search-box" class="h-0 overflow-hidden transition-all duration-600 ease-in-out">
            <div class="container mx-auto px-4 py-4">
                <div class="relative max-w-3xl mx-auto">
                    <form class="w-full" action="/search">
                        <input type="text" name="q" placeholder="搜索文章、标签或作者..."
                            class="w-full px-6 py-3 rounded-full border text-dark dark:text-white">
                        <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                            <i class="fa-solid fa-search text-lg"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>
    <script>
        // 主题切换
        const themeToggle = document.getElementById('theme-toggle');
        // 检查用户偏好
        if (localStorage.getItem('color-theme') === 'dark' ||
            (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        themeToggle.addEventListener('click', function () {
            // 切换暗色模式
            document.documentElement.classList.toggle('dark');
            // 保存用户偏好
            if (document.documentElement.classList.contains('dark')) {
                localStorage.setItem('color-theme', 'dark');
            } else {
                localStorage.setItem('color-theme', 'light');
            }
        });
    </script>
    <script>
        // 搜索框切换
        const searchToggle = document.getElementById('search-toggle');
        const searchBox = document.getElementById('search-box');
        let searchOpen = false;

        searchToggle.addEventListener('click', function () {
            if (searchOpen) {
                searchBox.style.height = '0';
            } else {
                searchBox.style.height = searchBox.scrollHeight + 'px';
                // 自动聚焦搜索框
                setTimeout(() => {
                    const searchInput = searchBox.querySelector('input');
                    if (searchInput) searchInput.focus();
                }, 300);
            }
            searchOpen = !searchOpen;
        });
    </script>
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        let menuOpen = false;
        menuToggle.addEventListener('click', function () {
            if (menuOpen) {
                mobileMenu.classList.remove('open');
                menuToggle.classList.remove('open');
            } else {
                mobileMenu.classList.add('open');
                menuToggle.classList.add('open');
            }
            menuOpen = !menuOpen;
        });
    </script>
</body>

</html>